<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息修改 - 邻里社区平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e0e6ed;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo i {
            font-size: 28px;
            color: #4e73df;
            margin-right: 10px;
        }
        
        .logo h1 {
            font-size: 24px;
            font-weight: 600;
            color: #4e73df;
        }
        
        .user-actions {
            display: flex;
            gap: 15px;
        }
        
        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background-color: #4e73df;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #3a56c4;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid #4e73df;
            color: #4e73df;
        }
        
        .btn-outline:hover {
            background-color: #f0f3ff;
        }
        
        .content {
            display: flex;
            gap: 30px;
        }
        
        .sidebar {
            flex: 0 0 250px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 20px;
        }
        
        .profile-card {
            text-align: center;
            padding: 20px 0;
        }
        
        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #e0e6ed;
            margin: 0 auto 15px;
        }
        
        .profile-card h2 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .profile-card p {
            color: #6b7280;
            font-size: 14px;
        }
        
        .nav-links {
            list-style: none;
            margin-top: 20px;
        }
        
        .nav-links li {
            margin-bottom: 10px;
        }
        
        .nav-links a {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            text-decoration: none;
            color: #4b5563;
            border-radius: 8px;
            transition: all 0.3s;
        }
        
        .nav-links a i {
            margin-right: 10px;
            font-size: 18px;
        }
        
        .nav-links a:hover, .nav-links a.active {
            background-color: #f0f3ff;
            color: #4e73df;
        }
        
        .main-content {
            flex: 1;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 30px;
        }
        
        .section-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e0e6ed;
            color: #374151;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #374151;
        }
        
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #4e73df;
            box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.1);
        }
        
        .avatar-upload {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .avatar-preview {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #e0e6ed;
        }
        
        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .upload-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #f3f4f6;
            border: 1px dashed #d1d5db;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .upload-btn:hover {
            background-color: #e5e7eb;
            border-color: #9ca3af;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e0e6ed;
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: none;
        }
        
        .alert-success {
            background-color: #d1fae5;
            color: #065f46;
            border: 1px solid #a7f3d0;
        }
        
        .alert-error {
            background-color: #fee2e2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }
        
        .readonly-field {
            background-color: #f9fafb;
            color: #6b7280;
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            .sidebar {
                flex: 0 0 auto;
                margin-bottom: 20px;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .avatar-upload {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-house-community"></i>
                <h1>邻里社区平台</h1>
            </div>
            <div class="user-actions">
                <button class="btn btn-outline"><i class="fas fa-bell"></i> 通知</button>
                <button class="btn btn-outline"><i class="fas fa-sign-out-alt"></i> 退出</button>
            </div>
        </header>
        
        <div class="content">
            <main class="main-content">
                <h2 class="section-title">修改个人信息</h2>
                
                <div id="alertBox" class="alert"></div>
                
                <form id="profileForm">
                    <div class="form-group">
                        <label for="nickname">昵称 *</label>
                        <input type="text" id="nickname" name="nickname" value="张小明" placeholder="请输入您的昵称" maxlength="50" required>
                    </div>
                    
                    <div class="avatar-upload">
                        <div class="avatar-preview">
                            <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="头像预览" id="avatarPreview">
                        </div>
                        <div>
                            <label for="avatar">头像</label>
                            <div class="upload-btn" onclick="document.getElementById('avatarInput').click()">
                                <i class="fas fa-cloud-upload-alt"></i> 选择图片
                            </div>
                            <input type="file" id="avatarInput" accept="image/*" style="display: none;" onchange="previewAvatar(this)">
                            <p style="font-size: 14px; color: #6b7280; margin-top: 8px;">支持 JPG、PNG 格式，大小不超过 2MB</p>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">手机号</label>
                        <input type="tel" id="phone" name="phone" value="13800138000" class="readonly-field" readonly>
                        <p style="font-size: 14px; color: #6b7280; margin-top: 8px;">手机号是登录账号，不可修改</p>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="gender">性别</label>
                            <select id="gender" name="gender">
                                <option value="0">未知</option>
                                <option value="1" selected>男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="birthday">生日</label>
                            <input type="date" id="birthday" name="birthday" value="1990-05-15">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="building">楼栋号</label>
                            <input type="text" id="building" name="building" value="3" placeholder="例如: 3" maxlength="20">
                        </div>
                        
                        <div class="form-group">
                            <label for="unit">单元号</label>
                            <input type="text" id="unit" name="unit" value="2" placeholder="例如: 2" maxlength="10">
                        </div>
                        
                        <div class="form-group">
                            <label for="room">房间号</label>
                            <input type="text" id="room" name="room" value="301" placeholder="例如: 301" maxlength="10">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="address">完整地址</label>
                        <input type="text" id="address" name="address" value="3号楼2单元301" class="readonly-field" readonly>
                    </div>
                    
                    <div class="form-group">
                        <label for="points">积分余额</label>
                        <input type="text" id="points" name="points" value="1280" class="readonly-field" readonly>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-outline">取消</button>
                        <button type="submit" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </main>
        </div>
    </div>

    <script>
        // 初始化表单数据
        function initForm() {
            // 设置性别选择
            document.getElementById('gender').value = '1';
            
            // 设置生日
            document.getElementById('birthday').value = '1990-05-15';
            
            // 初始化地址
            updateAddress();
        }
        
        // 实时更新地址
        function updateAddress() {
            const building = document.getElementById('building').value;
            const unit = document.getElementById('unit').value;
            const room = document.getElementById('room').value;
            
            let address = '';
            if (building) address += building + '号楼';
            if (unit) address += unit + '单元';
            if (room) address += room + '室';
            
            document.getElementById('address').value = address || '暂无地址信息';
        }
        
        // 头像预览
        function previewAvatar(input) {
            if (input.files && input.files[0]) {
                const file = input.files[0];
                
                // 检查文件大小 (不超过2MB)
                if (file.size > 2 * 1024 * 1024) {
                    showAlert('图片大小不能超过2MB', 'error');
                    return;
                }
                
                // 检查文件类型
                const validTypes = ['image/jpeg', 'image/png', 'image/jpg'];
                if (!validTypes.includes(file.type)) {
                    showAlert('只支持JPG和PNG格式的图片', 'error');
                    return;
                }
                
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    document.getElementById('avatarPreview').src = e.target.result;
                    document.getElementById('sidebarAvatar').src = e.target.result;
                }
                
                reader.readAsDataURL(file);
            }
        }
        
        // 显示提示信息
        function showAlert(message, type) {
            const alertBox = document.getElementById('alertBox');
            alertBox.textContent = message;
            alertBox.className = `alert alert-${type}`;
            alertBox.style.display = 'block';
            
            // 5秒后隐藏提示
            setTimeout(() => {
                alertBox.style.display = 'none';
            }, 5000);
        }
        
        // 表单提交
        document.getElementById('profileForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = {
                nickname: document.getElementById('nickname').value,
                gender: document.getElementById('gender').value,
                birthday: document.getElementById('birthday').value,
                building: document.getElementById('building').value,
                unit: document.getElementById('unit').value,
                room: document.getElementById('room').value,
                avatar: document.getElementById('avatarPreview').src
            };
            
            // 模拟API调用
            simulateApiCall(formData)
                .then(response => {
                    // 更新侧边栏信息
                    document.getElementById('sidebarNickname').textContent = formData.nickname;
                    
                    showAlert('个人信息更新成功！', 'success');
                })
                .catch(error => {
                    showAlert('更新失败，请稍后重试', 'error');
                });
        });
        
        // 模拟API调用
        function simulateApiCall(data) {
            return new Promise((resolve, reject) => {
                // 模拟网络延迟
                setTimeout(() => {
                    // 模拟90%的成功率
                    if (Math.random() > 0.1) {
                        resolve({ success: true, message: '更新成功' });
                    } else {
                        reject({ success: false, message: '服务器错误' });
                    }
                }, 1000);
            });
        }
        
        // 监听地址相关字段的变化
        document.getElementById('building').addEventListener('input', updateAddress);
        document.getElementById('unit').addEventListener('input', updateAddress);
        document.getElementById('room').addEventListener('input', updateAddress);
        
        // 初始化表单
        initForm();
    </script>
</body>
</html>